<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="/css/car.css">
    <script src="/layui/layui.js" type="text/javascript" charset="UTF-8"> </script>
    <title>Document</title>
    <!DOCTYPE html>

    <script src="js/echarts.js"></script>
    <script src="js/car.js"></script>
  </head>
 

  <body>

    <div class="pan">
      车辆管理
    </div>
    <div class="layui-fluid" style="height: 90%;">
      <div class="layui-row" style="height: 98%; width: 100%;">
        <div class="hecha">核查时间：<input type="datetime-local"> - <input type="datetime-local"
            style="margin-right: 25px;">
          <span> 号牌种类：</span>
          <input type="text" id="coursName" list="cours" class="form-control" placeholder="所有"
            autocomplete="off">
          <datalist id="cours">
            <option>王雪婷</option>
            <option>王雪婷</option>
            <option>王雪婷</option>
            <option>王雪婷</option>
          </datalist>
        </div>
        <div class="layui-row"
          style="height: 25%; background-image: url(/img/bg22.png);background-repeat: no-repeat; background-size: 99% 90%;margin-left: 15px;">
        </div>
        <div class="layui-row"
          style="height: 30%; width: 98%; background-image: url(/img/bg22.png);margin-left: 15px; background-repeat: no-repeat;background-size: 100% 91%;">
          <div id="main" style="width: 100%;height:200px;"></div>
        </div>
        <div class="layui-row" style="height: 65%; width: 98%; background-image: url(/img/bg22.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;margin-left: 15px;">
          <div class="layui-container">
            <table id="demo" style="width: 100%; ">

            </table>
          </div>


        </div>

      </div>
    </div>

    <title>Document</title>
  </body>
  
<script>

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
   // 指定图表的配置项和数据
   var option = {
grid: {
  left: '10%',
  bottom: '38%'
},
tooltip: {},
legend: {
  data: ['销量']
},
xAxis: {
  data: ['秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', '秦皇岛北出口检查站', ]
  ,
  axisLabel: {
    interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
    rotate: -30   //调整数值改变倾斜的幅度（范围-90到90）
  }
},
yAxis: {},
series: [
  {
    barWidth : 30,
    name: '销量',
    type: 'bar',
    data: [ 90000,88000, 85000, 83000, 83210,82111,86211,56621,65111,55612,66215,51123,11423,15413,15155,1515,15123,11243,41123,13313],

  }
]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

</script>
</html>